<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">修改密码</view>
      <view class="head_right"> </view>
    </view>

    <view class="box">
      <!-- 手机号 -->
      <u-input
        class="inputPassword"
        :placeholder="placeText"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="mobile"
        @change="change"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="false">手机号码格式有误，请重试！</view>
      <!-- 验证码 -->
      <u-input
        class="inputPassword"
        type="number"
        placeholder="请输入验证码"
        maxlength="6"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="smsCode"
        @change="changeSms"
        placeholderStyle="color:#888888"
      >
        <template slot="suffix">
          <u-code
            ref="uCode"
            @change="codeChange"
            seconds="120"
            changeText="Xs"
          ></u-code>
          <view @tap="getCode" class="codeTip">{{ tips }}</view>
        </template></u-input
      >
      <view class="verify" v-show="false">验证码错误，请重试！</view>
      <view class="verify" v-show="false">请输入验证码！</view>
      <!-- 新密码 -->
      <u-input
        class="inputPassword"
        type="password"
        placeholder="请输入新的密码"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="password"
        @change="changePwd"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="false">密码格式不对！</view>
      <!-- 确认密码 -->
      <u-input
        class="inputPassword"
        type="password"
        placeholder="请再次确认密码"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="password_two"
        @change="changePwdTwo"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="false">与输入的新密码不同！</view>
      <view class="login">
        <view class="loginFont" @click="subBtn">确认</view>
      </view>
    </view>

    <floatingBall></floatingBall>
  </view>
</template>
    
    <script>
import selectType from "@/components/selectType.vue";
export default {
  components: {
    selectType,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      inputFont: "30rpx",
      mobile: "",
      smsCode: "",
      tips: "",
      password: "",
      password_two: "",
      showPlan: false,
      email_or_phone: "",
      placeText: "请输入手机号码",
    };
  },
  onLoad(options) {
    this.email_or_phone = options.email_or_phone;
    if (this.email_or_phone == 1) {
      this.placeText = "请输入手机号码";
    } else {
      this.placeText = "请输入邮箱";
    }
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    goPhone() {
      // uni.navigateTo({
      //     url:"/pages/components/recording_audio"
      // })
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    change() {
      console.log(this.mobile);
    },
    changeSms() {
      console.log(this.smsCode);
    },
    changePwd() {
      console.log(this.password);
    },
    changePwdTwo() {
      console.log(this.password_two);
    },
    codeChange(text) {
      this.tips = text;
    },
    subBtn() {
      if (this.mobile == "") {
        if (this.email_or_phone == 1) {
          return uni.$u.toast("请输入手机号");
        } else {
          return uni.$u.toast("请输入邮箱");
        }
      }
      if (this.smsCode == "") {
        uni.$u.toast("请输入验证码");
        return;
      }
      if (this.password == "") {
        uni.$u.toast("请输入密码");
        return;
      }
      if (this.password_two == "") {
        uni.$u.toast("请再次输入密码");
        return;
      }
      this.$http
        .passportUpdatePassword({
          mobile: this.mobile,
          password: this.password,
          password_two: this.password_two,
          smsCode: this.smsCode,
          email_or_phone:this.email_or_phone
        })
        .then((res) => {
          console.log(res, "修改密码");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 2000);
        })
        .catch((error) => {
          console.log(error);
          uni.$u.toast(error);
        });
    },
    getCode() {
      if (!this.mobile) {
        if (this.email_or_phone == 1) {
          return uni.$u.toast("请输入手机号");
        } else {
          return uni.$u.toast("请输入邮箱");
        }
      }

      if (this.$refs.uCode.canGetCode) {
        if (this.email_or_phone == 1) {
          this.$http
            .sendSmsCaptcha({ mobile: this.mobile })
            .then((res) => {
              // 模拟向后端请求验证码
              uni.showLoading({
                title: "正在获取验证码",
              });
              setTimeout(() => {
                uni.hideLoading();
                // 这里此提示会被this.start()方法中的提示覆盖
                uni.$u.toast("验证码已发送");
                // 通知验证码组件内部开始倒计时
                this.$refs.uCode.start();
              }, 2000);
            })
            .catch((error) => {
              console.log(error);
              uni.$u.toast(error);
            });
        } else {
          this.$http
            .send_email({ email: this.mobile })
            .then((res) => {
              // 模拟向后端请求验证码
              uni.showLoading({
                title: "正在获取验证码",
              });
              setTimeout(() => {
                uni.hideLoading();
                // 这里此提示会被this.start()方法中的提示覆盖
                uni.$u.toast("验证码已发送");
                // 通知验证码组件内部开始倒计时
                this.$refs.uCode.start();
              }, 2000);
            })
            .catch((error) => {
              console.log(error);
              uni.$u.toast(error);
            });
        }
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
  },
};
</script>
    
    <style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0rpx 60rpx;
  .box_title {
    text-align: center;
    font-size: 32rpx;
    color: #888888;
    margin: 56rpx 0;
  }
  /deep/.inputPassword {
    width: 630rpx;
    height: 96rpx;
    background-color: #f4f4f4;
    margin-top: 40rpx;
    position: relative;

    .u-input__content {
      padding: 0 50rpx;
    }
    .codeTip {
      position: absolute;
      right: 50rpx;
      bottom: 30rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #55b877;
    }
  }
  .login {
    width: 630rpx;
    height: 96rpx;
    margin-top: 54rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;

    .loginFont {
      line-height: 96rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .verify {
    margin: 16rpx 0 0 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #ee6060;
  }
}
</style>